<template>
	<view class="flex1" style="flex-direction: column;padding-bottom: 40rpx;">
		<view class="record-box" v-for="(item,i) in 3" :key="i">
			<view class="record-box-t flex1">
				<view class="record-box-t-l flex1">
					<image class="record-img" src="/static/recharge/balance.png" mode="heightFix"></image>
					余额支付
				</view>
				-50.00元
			</view>
			<view class="record-box-b flex1">
				<view class="record-box-b-l">
					支付时间
				</view>
				2023.3.20 15:35
			</view>
			<view class="record-box-b flex1">
				<view class="record-box-b-l">
					剩余余额
				</view>
				280.00元
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// components: {
		// 	noneItem
		// },
		name: "recordItem",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.record-box {
		width: 92%;
		min-height: 250rpx;
		background: #FFFFFF;
		padding: 0 28rpx;
		padding-bottom: 24rpx;
		border-radius: 12rpx;
		box-sizing: border-box;
		margin-top: 28rpx;
	}

	.record-box-t {
		width: 100%;
		height: 98rpx;
		border-bottom: 1rpx solid #EEEEEE;
		justify-content: space-between;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
	}

	.record-box-t-l {
		font-size: 28rpx;
		color: #333333;
	}

	.record-img {
		height: 36rpx;
		margin-right: 12rpx;
	}

	.record-box-b {
		justify-content: space-between;
		font-size: 26rpx;
		color: #333333;
		margin-top: 28rpx;
	}

	.record-box-b-l {
		color: #999999;
	}
</style>
